$blue: #1da1f2;
$highlight-blue: #1b95e0;
$hover-blue: #1a90d9;
$hover-gray: #e6e8eb;
$black: #0f1419;
$dark-gray: #6e8698;
$light-gray: #aab8c2;
$extra-light-gray: #cbd5e1;
$extra-extra-light-gray: #eef3f7;
$border: #dde7ef;
$hint: #8c9094;
$theme-light: #ffffff;
$theme-light-gray-text: #536471;
$theme-light-icon: #536471;
$theme-light-border: #eff3f4;
$theme-dim: #15202b;
$theme-dim-gray-text: #798a96;
$theme-dim-border: #38444d;
$theme-dim-icon: #8899a6;
$theme-dark: #000000;
$theme-dark-white-text: #d9d9d9;
$theme-dark-gray-text: #6e767d;
$theme-dark-border: #2f3336;
$theme-dark-icon: #6e767d;
$bg: #f7f8f9;
$font-stack: 'Roboto', sans-serif;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: $font-stack;
}

body {
  background-color: $bg;
  color: $black;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
  font: inherit;
  color: inherit;
}

.bar {
  height: 8px;
  background-color: $blue;
  background: linear-gradient(to right, #00c6ff, #0072ff);
}

header {
  padding: 32px 16px;
  text-align: center;

  h1 {
    font-size: 48px;
    font-weight: 500;

    @media (max-width: 640px) {
      & {
        font-size: 38px;
      }
    }

    @media (max-width: 520px) {
      & {
        font-size: 32px;
      }
    }
  }
}

main {
  flex: 1;
  max-width: 1024px;
  width: 100%;
  margin: auto;
  padding: 32px 16px;
  display: flex;
  align-items: flex-start;

  .form {
    background-color: white;
    border: 1px $border solid;
    border-radius: 8px;
    padding: 24px;
    flex: 1;

    h2 {
      font-size: 22px;
      font-weight: 500;
      margin-bottom: 32px;
    }

    .form-control {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 2px;
      }

      label {
        display: block;
        font-weight: 500;
      }

      input,
      textarea {
        display: block;
        font: inherit;
        width: 100%;
        padding: 10px 14px;
        margin: 4px 0;
        border: 1px $extra-light-gray solid;
        border-radius: 6px;
        outline: none;
        transition: border-color 200ms ease-in;

        &:focus {
          border-color: $blue;
        }

        &::placeholder {
          color: #9ca1a5;
        }
      }

      textarea {
        resize: vertical;
      }

      small {
        font-size: 13px;
        color: $hint;
      }

      .username_input {
        display: block;
        background-color: white;
        color: $hint;
        font: inherit;
        width: 100%;
        padding: 0 14px;
        margin: 4px 0;
        border: 1px $extra-light-gray solid;
        border-radius: 6px;
        outline: none;
        transition: border-color 200ms ease-in, color 200ms ease-in;
        display: flex;
        align-items: center;

        &:focus-within {
          border-color: $blue;
          color: $black;
        }

        &::placeholder {
          color: #9ca1a5;
        }

        input {
          display: inline;
          margin: 0 0 0 2px;
          padding: 10px 0;
          border: none;
        }
      }

      input[type='radio'] {
        display: inline;
        width: fit-content;

        + label {
          display: inline;
        }
      }

      p {
        font-weight: 500;
      }

      .group {
        margin-top: 10px;
        display: flex;

        .radio_container {
          display: block;
          position: relative;
          padding-left: 22px;
          margin-right: 20px;
          cursor: pointer;
          font-size: 16px;
          font-weight: 400;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }

        .radio_container input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
          height: 0;
          width: 0;
        }

        .radio_mark {
          position: absolute;
          top: 1px;
          left: 0;
          height: 16px;
          width: 16px;
          border: 1px $light-gray solid;
          border-radius: 50%;
          background-color: white;
        }

        .radio_container input:focus ~ .radio_mark {
          box-shadow: 0 0 0 3px rgba(29, 161, 242, 0.4);
        }

        .radio_container input:checked ~ .radio_mark {
          background-color: $blue;
          border-color: $blue;
        }

        .radio_mark:after {
          content: '';
          position: absolute;
          display: none;
        }

        .radio_container input:checked ~ .radio_mark:after {
          display: block;
        }

        .radio_container .radio_mark:after {
          top: 3px;
          left: 3px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: white;
        }
      }

      &.upload {
        margin-bottom: 42px;
        display: flex;
        position: relative;

        label {
          display: inline-block;
          position: relative;
          border-radius: 99px;
          background-color: $blue;
          color: #fff;
          font-weight: 400;
          padding: 10px 30px;
          cursor: pointer;

          @media (hover: hover) {
            & {
              transition: background 200ms ease-in;
            }

            &:hover {
              background-color: $hover-blue;
            }
          }

          @media (hover: none) {
            &:active {
              background-color: $hover-blue;
            }
          }
        }

        .file {
          opacity: 0;
          width: 0;
          height: 0;
          position: absolute;
          top: 0;
          left: 0;
          cursor: pointer;
          z-index: -10;
        }

        .file-name {
          font-size: 13px;
          font-weight: 400;
          position: absolute;
          bottom: -29px;
          background-color: $extra-extra-light-gray;
          color: $black;
          border-radius: 99px;
          padding: 4px 16px;
          display: none;

          &.show {
            display: block;
          }
        }

        .reset {
          border: 1px $blue solid;
          border-radius: 99px;
          background-color: white;
          color: $blue;
          font: inherit;
          cursor: pointer;
          padding: 10px 30px;
          margin-left: 12px;

          @media (hover: hover) {
            & {
              transition: background 200ms ease-in;
            }

            &:hover {
              background-color: $hover-gray;
            }
          }

          @media (hover: none) {
            &:active {
              background-color: $hover-gray;
            }
          }
        }
      }
    }

    @media (max-width: 890px) {
      & {
        width: 75%;
        margin: 0 auto;
      }
    }

    @media (max-width: 700px) {
      & {
        width: 85%;
        margin: 0 auto;
      }
    }

    @media (max-width: 640px) {
      & {
        width: 95%;
        margin: 0 auto;
      }
    }

    @media (max-width: 520px) {
      & {
        background-color: $bg;
        width: 100%;
        margin: 0 auto;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 24px 0;
      }
    }
  }

  .tweet-desk {
    background-color: white;
    border: 1px $border solid;
    border-radius: 8px;
    padding: 24px;
    margin-left: 16px;
    position: sticky;
    top: 16px;
    z-index: 10;

    h2 {
      font-size: 22px;
      font-weight: 500;
    }

    .tweet_box {
      border: 1px $theme-light-border solid;
      background-color: white;
      margin: 32px 0 34px;
      width: 440px;

      &.dim {
        border: 1px $theme-dim solid;
        background-color: $theme-dim;
      }

      &.dark {
        border: 1px $theme-dark solid;
        background-color: $theme-dark;
      }

      @media (max-width: 940px) {
        & {
          width: 400px;
        }
      }

      @media (max-width: 890px) {
        & {
          max-width: 440px;
          width: 100%;
          margin: 32px auto;
        }
      }
    }

    .tweet {
      border: 1px transparent solid;
      background-color: white;
      padding: 0 16px;
      font-size: 15px;
      width: 100%;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      .head {
        padding-top: 12px;
        display: flex;
        justify-content: space-between;

        .title {
          display: flex;
          align-items: center;

          img {
            display: inline-block;
            border-radius: 50%;
            margin-right: 12px;
          }

          .text {
            .top {
              font-weight: 700;
              display: flex;
              align-items: center;

              .tweet_name {
                margin-right: 2px;
              }

              .verified {
                font-weight: 400;
                color: $blue;

                &.hide {
                  display: none;
                }
              }
            }

            .bottom {
              color: $theme-light-gray-text;
            }
          }
        }

        .dots {
          color: $theme-light-gray-text;
        }
      }

      .content {
        .message {
          padding-top: 16px;
          font-size: 23px;

          .highlight {
            color: $highlight-blue;
          }
        }

        .tweet_info {
          color: $theme-light-gray-text;
          padding: 16px 0;
          display: flex;
        }
      }

      .stats {
        border-top: 1px $theme-light-border solid;
        color: $theme-light-gray-text;
        padding: 16px 4px;
        display: flex;
        flex-wrap: wrap;

        .stat {
          margin-right: 24px;

          .count {
            font-weight: 700;
            color: $black;
          }

          &.hide {
            display: none;
          }

          @media (max-width: 520px) {
            & {
              margin-right: 12px;
            }
          }
        }
      }

      .tail {
        border-top: 1px $theme-light-border solid;
        padding: 12px 0;
        display: flex;
        justify-content: space-around;

        svg {
          color: $theme-light-icon;
        }
      }

      &.dim {
        background-color: $theme-dim;
        color: white;

        .head {
          .title .text {
            .top .verified {
              color: white;
            }

            .bottom,
            .dots {
              color: $theme-dim-gray-text;
            }
          }
        }

        .content .tweet_info {
          color: $theme-dim-gray-text;

          .tweet_client {
            color: $highlight-blue;
          }
        }

        .stats {
          border-top: 1px $theme-dim-border solid;
          color: $theme-dim-gray-text;

          .stat .count {
            color: white;
          }
        }

        .tail {
          border-top: 1px $theme-dim-border solid;

          svg {
            color: $theme-dim-gray-text;
          }
        }
      }

      &.dark {
        background-color: $theme-dark;
        color: $theme-dark-white-text;

        .head {
          .title .text {
            .top .verified {
              color: $theme-dark-white-text;
            }

            .bottom,
            .dots {
              color: $theme-dark-gray-text;
            }
          }
        }

        .content .tweet_info {
          color: $theme-dark-gray-text;

          .tweet_client {
            color: $highlight-blue;
          }
        }

        .stats {
          border-top: 1px $theme-dark-border solid;
          color: $theme-dark-gray-text;

          .stat .count {
            color: $theme-dark-white-text;
          }
        }

        .tail {
          border-top: 1px $theme-dark-border solid;

          svg {
            color: $theme-dark-gray-text;
          }
        }
      }

      @media (max-width: 395px) {
        & {
          font-size: 14px;
        }

        .content .message {
          font-size: 21px;
        }

        .stats {
          padding: 16px 0;

          .stat {
            margin-right: 8px;
          }
        }
      }
    }

    .btn {
      display: block;
      border: none;
      border-radius: 6px;
      border-radius: 99px;
      background-color: $blue;
      color: white;
      font: inherit;
      margin: auto;
      padding: 11px 33px;
      cursor: pointer;

      @media (hover: hover) {
        & {
          transition: background 200ms ease-in;
        }

        &:hover {
          background-color: $hover-blue;
        }
      }

      @media (hover: none) {
        &:active {
          background-color: $hover-blue;
        }
      }
    }

    @media (max-width: 890px) {
      & {
        width: 75%;
        margin: 0 auto 16px;
        position: static;
      }
    }

    @media (max-width: 700px) {
      & {
        width: 85%;
        margin: 0 auto 16px;
      }
    }

    @media (max-width: 640px) {
      & {
        width: 95%;
        margin: 0 auto 16px;
      }
    }

    @media (max-width: 520px) {
      & {
        background-color: $bg;
        width: 100%;
        margin: 0 auto 16px;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 24px 0;
      }
    }
  }

  @media (max-width: 890px) {
    & {
      flex-direction: column-reverse;
    }
  }

  @media (max-width: 520px) {
    & {
      padding: 16px;
    }
  }
}

footer {
  padding: 32px 16px;
  font-size: 14px;
  font-weight: 400;
  color: $dark-gray;
  display: flex;
  justify-content: center;
  align-items: center;

  .foot {
    text-align: center;

    a {
      border-bottom: 1px $dark-gray dotted;

      @media (hover: hover) {
        &:hover {
          border-bottom-style: solid;
        }
      }

      @media (hover: none) {
        &:active {
          border-bottom-style: solid;
        }
      }
    }
  }

  .dot {
    width: 3px;
    height: 3px;
    background-color: $dark-gray;
    border-radius: 50%;
    margin: 0 6px;
  }
}
